<template>
  <div style="background: #eee; padding:10px;height: 100%;box-sizing:border-box" v-loading="!optionsMap">
    <my-crud v-if="optionsMap" :filter="{collapsible:true, labelWidth:'80px'}"
             ref="crud"
             :columns="columns"
             :adapter="adapter"
             :table-options="{rowKey:'id'}"
             :form-options="{labelWidth:'80px'}"
    >
      <template v-slot:title>
        我的数据表格
      </template>

      <template v-slot:toolbar>
        <el-button type="primary" size="small" @click="openAddDialog">新增</el-button>
        <el-button type="danger" size="small" @click="batchRemove">批量删除</el-button>
      </template>

      <template v-slot:filter>
        <my-input label="用户名" name="user"></my-input>
        <my-select label="类型" name="type" collapsible></my-select>
        <my-input label="标题" name="title" collapsible></my-input>
        <my-range label="范围" mode="date" name="range" collapsible></my-range>
      </template>

      <template v-slot:form>
        <!-- ="{row}" -->
        <div>
          <my-input label="用户名" name="name" :rules="{required:true}"></my-input>
          <my-radio label="性别" name="gender" :rules="{required:true}" :options="optionsMap.gender"></my-radio>
          <my-input-number label="年龄" name="age" ></my-input-number>
          <my-date-picker mode="dateTime" label="开始日期" name="startDate" :props="{valueFormat:'yyyy-MM-dd HH:mm:ss'}"></my-date-picker>
          <my-date-picker mode="dateTime" label="结束日期" name="endDate" :props="{valueFormat:'yyyy-MM-dd HH:mm:ss'}"></my-date-picker>
          <my-tree-select name="city" label="城市" :options="optionsMap.city" :props="{multiple: false, root: '100000' }"></my-tree-select>
        </div>
      </template>

      <template v-slot:gender="{row}" >
        <span>{{row.gender|formatFilter('genderCode')}}</span>
      </template>
      <template v-slot:city="{row}" >
        <span>{{row.city|formatFilter('CITY')}}</span>
      </template>
    </my-crud>
  </div>
</template>

<script>

  import person from '$my/code/mixin/person'
  import {MyCrud} from '$ui'

  export default {
    mixins: [person],
    data() {
      return {
        optionsMap: null,
        adapter: MyCrud.adapter.call(this, 'person'),
        genderOpts: [
          {label: '男', value: '0'},
          {label: '女', value: '1'}
        ],
        
        columns: [
          {type: 'selection'},
          {type: 'index', label: '#'},
          { label: '姓名', prop: 'name'}, 
          { label: '年龄', prop: 'age'},
          { label: '性别', prop: 'gender'}, 
          { label: '城市', prop: 'city'},
          { label: '开始时间', prop: 'startDate'},
          { label: '结束时间', prop: 'endDate'},
          {
            type: 'handle',
            label: '操作',
            width: 200,
            handles: [
              {view: true},
              {edit: true},
              {remove: true}
            ]
          }
        ]
      }
    },
    methods: {
      openAddDialog() {
        this.$refs.crud.openAddDialog()
      },
      batchRemove() {
        this.$refs.crud.batchRemove()
      },  
      getDictOpts() {
        this.$getOptionsMap([
          {name: 'city', code: 'CITY'},  
          {
            name: 'gender', 
            code: 'genderCode', 
            custFetch: () => {
              const arr = [
                {dictCode: '0', dictName: '男'},
                {dictCode: '1', dictName: '女'}
              ]
              const list = arr.map((item) => {
              return {
                ...item,
                value: item.dictCode,
                label: item.dictName
              } 
            })
              return Promise.resolve(list)
            }
          }
        ]).then((res) => {
          this.optionsMap = res
        })
      }
    },
    created() {
      this.getDictOpts()
    }
  }
</script>